<script>
import KtMap from "/src/components/common/KtMap.vue";
import MapSelectDialog from "/src/views/manage/iot/project/components/MapSelectDialog.vue";
import iot from "/src/js/iot/index.js";

export default {
  components: {MapSelectDialog, KtMap},
  data() {
    return {
      iot,
      show: false,
      requestParam: {
        "name": null,
        "sn": null,
        "protocolCode": null,
        "uploadCycle": null,
        "priority": null,
        "projectId": null,
        "longitude": null,
        "latitude": null
      },
      loading: false
    }
  },
  mounted() {
  },
  methods: {
    genSn() {
      let ran = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L",
        "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",
        "0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
        "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l",
        "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
      let str = "";
      for (let i = 0; i < 16; i++) {
        let index = Math.floor(Math.random() * ran.length);
        str += ran[index];
      }
      this.requestParam.sn = str;
    },
    openNew(projectId) {
      this.requestParam = {
        "name": null,
        "sn": null,
        "protocolCode": null,
        "uploadCycle": null,
        "priority": null,
        "projectId": null,
        "longitude": null,
        "latitude": null
      };
      this.requestParam.projectId = projectId + "";
      this.open(this.requestParam);
    },
    open(requestParam) {
      if (!requestParam) {
        this.requestParam = {
          "name": null,
          "sn": null,
          "protocolCode": null,
          "uploadCycle": null,
          "priority": null,
          "projectId": null,
          "longitude": null,
          "latitude": null
        };
        this.show = true;
        return;
      }
      this.requestParam = JSON.parse(JSON.stringify(requestParam));
      this.show = true;

    },
    // 关闭
    close() {
      this.show = false;
    },
    // 地图选择
    mapSelect(data) {
      this.requestParam.longitude = data.longitude + "";
      this.requestParam.latitude = data.latitude + "";
      // 保留后5位
      this.requestParam.longitude = this.requestParam.longitude.substring(0, this.requestParam.longitude.indexOf(".") + 6);
      this.requestParam.latitude = this.requestParam.latitude.substring(0, this.requestParam.latitude.indexOf(".") + 6);
    },
    toSave() {
      if (this.requestParam.uploadCycle) {
        this.requestParam.uploadCycle = parseInt(this.requestParam.uploadCycle);
      }
      if (this.requestParam.priority) {
        this.requestParam.priority = parseInt(this.requestParam.priority);
      }
      if (this.requestParam.projectId) {
        this.requestParam.projectId = parseInt(this.requestParam.projectId);
      }
      if (this.requestParam.uploadCycle === '0') {
        this.requestParam.uploadCycle = parseInt(this.requestParam.uploadCycle);
      }
      if (this.requestParam.priority === '0') {
        this.requestParam.priority = parseInt(this.requestParam.priority);
      }


      if (this.loading) {
        return;
      }

      if (!this.requestParam.sn) {
        this.$message.error(this.$i18n.zhToGlobal('请输入设备的SN'));
        return;
      }

      if (!this.requestParam.name) {
        this.$message.error(this.$i18n.zhToGlobal('请输入设备名称'));
        return;
      }

      // if (!this.requestParam.longitude || !this.requestParam.latitude) {
      //   this.$message.error(this.$i18n.zhToGlobal('请选择经纬度'));
      //   return;
      // }


      this.loading = true;
      // element的loading
      let loading = this.$loading({
        lock: true,
        text: this.$i18n.zhToGlobal('保存中'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$kt.request.send({
        uri: "/business-iot-web/admin/iotDevice/save",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.$message.success(this.$i18n.zhToGlobal('保存成功'));
          this.close();
          this.loading = false;
          loading.close();
          this.$emit("save");
          this.requestParam = {
            title: "",
            description: "",
            longitude: "",
            latitude: "",
            sn: ""
          };
        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
          this.loading = false;
          loading.close();
        }
      });
    }
  }
}
</script>

<template>
  <el-dialog
      draggable
      width="300px"
      v-model="show"
      :title="$i18n.zhToGlobal('保存项目')"
      @close="close"
  >
    <el-scrollbar
        :style="{height: 'calc(100vh - 150px)'}">
      <el-form
          label-position="top"
          :model="requestParam" label-width="80px">

        <el-form-item :label="$i18n.zhToGlobal('名称')" required>
          <el-input v-model="requestParam.name"></el-input>
        </el-form-item>

        <el-form-item :label="$i18n.zhToGlobal('设备的SN')" required>
          <el-input v-model="requestParam.sn">
            <template #append>
              <div
                  @click="genSn"
                  class="gen-btn">
                {{ $i18n.zhToGlobal('生成') }}
              </div>
            </template>
          </el-input>
        </el-form-item>

        <!-- 设备协议 -->
        <el-form-item :label="$i18n.zhToGlobal('设备协议')" required>
          <el-select v-model="requestParam.protocolCode">
            <el-option
                v-for="item in iot.getProtocolList()"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>


        <!-- 经纬度 -->
        <el-form-item :label="$i18n.zhToGlobal('经纬度')" required>
          <el-button
              v-if="!requestParam.longitude || !requestParam.latitude"
              style="width: 100%"
              @click="()=>this.$refs.mapSelectDialog.open()">
            {{ $i18n.zhToGlobal('选择经纬度') }}
          </el-button>
          <el-button
              v-else
              style="width: 100%"
              @click="()=>this.$refs.mapSelectDialog.open(requestParam)">
            {{ requestParam.longitude }}{{ " , " }}{{ requestParam.latitude }}
          </el-button>
        </el-form-item>

        <!-- 上传周期 -->
        <el-form-item :label="`${$i18n.zhToGlobal('间隔')}[${$i18n.zhToGlobal('秒')}]`">
          <el-input v-model="requestParam.interval"
                    type="number"
          ></el-input>
        </el-form-item>

        <!-- 优先级 -->
        <el-form-item :label="`${$i18n.zhToGlobal('优先级')}`">
          <el-input v-model="requestParam.priority"
                    type="number"
          ></el-input>
          <div style="font-size: 12px;color: #999999;">
            {{ $i18n.zhToGlobal('优先级越高，排序越靠前') }}
          </div>
        </el-form-item>

      </el-form>

    </el-scrollbar>

    <div style="height: 40px"></div>
    <el-button
        @click="toSave"
        type="primary"
        style="width: 100%;position: absolute;bottom: 0;left: 0;border-radius: 0 0 3px 3px"
    >
      {{ $i18n.zhToGlobal('保存') }}
    </el-button>
  </el-dialog>

  <map-select-dialog
      @select="mapSelect"
      ref="mapSelectDialog"></map-select-dialog>

</template>

<style scoped lang="scss">
.map-box {
  // 超出不显示
  overflow: hidden;
}

.gen-btn {
  cursor: pointer;
}

.gen-btn:hover {
  transform: scale(1.1);
}

.gen-btn:active {
  transform: scale(1);
}


</style>